<template>
  <navigatorComp title="" bgcColor="#121512" fontColor="#fff" :isBack="false">
    <!-- <template #rightWrap>
			<view class="mine_topIcon display_flex">
				<image
					src="http://112.124.50.179:8888/imgs/mine/mine_setting.png"
					mode=""
					style="margin-right: 32rpx"
				></image>
				<view class="mine_message">
					<badge :unreadMessagesNumber="unreadMessagesNumber"></badge>
					<image
						@click="goUrl('/subPages/home/message')"
						src="http://112.124.50.179:8888/imgs/mine/mine_mess.png"
						mode=""
					></image>
				</view>
			</view>
		</template> -->
  </navigatorComp>

  <view class="content">
    <view class="userInfo" @click="goUrl('/subPages/mine/setting/editUser')">
      <image v-if="userInfo.headUrl" :src="userInfo.headUrl" mode=""></image>
      <image
        v-else
        src="http://112.124.50.179:8888/imgs/default_avater.png"
        mode=""
      ></image>
      <view>
        <view class="userInfo_name">
          {{
            isLogin() ? userInfo.nickname || userInfo.phoneNumber : "点击登录"
          }}
        </view>
        <view
          v-if="isLogin()"
          class="userInfo_inviteCode"
          @click.native.stop="copyInviteCode"
        >
          邀请码：{{ userInfo.invitationCode }}
          <image
            v-if="userInfo.invitationCode"
            src="http://112.124.50.179:8888/imgs/home/copy.png"
            mode=""
          >
          </image>
        </view>
        <view v-else class="userInfo_tip">登录后畅享更多权益</view>
      </view>
    </view>

    <view class="mine_account">
      <view
        class="mine_account_left"
        @click="goUrl('/subPages/mine/cloudCoin/recharge')"
      >
        <image
          src="http://112.124.50.179:8888/imgs/mine/coin_bgc1.png"
          mode=""
          class="bgcImg"
        ></image>
        <view>
          <view class="mine_account_price">
            {{ userInfo.ybCoinNumber
            }}<image
              src="http://112.124.50.179:8888/imgs/home/coin.png"
              mode=""
            ></image>
          </view>
          <view class="mine_account_price_intro">账户余额(福币)</view>
        </view>
        <view class="mine_account_chongzhi display_flex">
          充值
          <up-icon
            name="arrow-right"
            color="#0E0E0E"
            size="12"
            style="margin-left: 5rpx"
          ></up-icon>
        </view>
      </view>
      <view
        class="mine_account_right"
        @click="goUrl('/subPages/mine/memberCenter/index')"
      >
        <image
          class="mine_account_right_bottom"
          src="http://112.124.50.179:8888/imgs/mine/mine_pic.png"
          mode=""
        ></image>
				<view class="mine_account_right_title">{{userInfo.growthType===1?'普通会员':userInfo.growthType===2?'钻石会员':'至尊会员'}}</view>
        <view class="mine_account_right_intro">享会员权益</view>
        <image
          class="mine_account_right_arrow"
          src="http://112.124.50.179:8888/imgs/mine/mine-right.png"
          mode=""
        ></image>
      </view>
    </view>

    <view class="mine_funcList">
      <view
        class="mine_funcList_item"
        @click="goUrl('/subPages/mine/cloudCoin/invite')"
      >
        <image
          src="http://112.124.50.179:8888/imgs/mine/mine_func4.png"
          mode="aspectFill"
        ></image>
        邀请奖励
      </view>
      <view
        class="mine_funcList_item"
        @click="goUrl('/subPages/mine/cqHistory')"
      >
        <image
          src="http://112.124.50.179:8888/imgs/mine/mine_cq.png"
          mode="aspectFill"
        ></image>
        抽签历史
      </view>
      <view class="mine_funcList_item" @click="contactModel.show = true">
        <image
          src="http://112.124.50.179:8888/imgs/mine/customer.png"
          mode="aspectFill"
        ></image>
        联系客服
      </view>
      <view
        class="mine_funcList_item"
        @click="goUrl('/subPages/mine/feedback')"
      >
        <image
          src="http://112.124.50.179:8888/imgs/mine/feedback.png"
          mode="aspectFill"
        ></image>
        用户反馈
      </view>
      <view class="mine_funcList_item" @click="goUrl('/subPages/home/message')">
        <image
          src="http://112.124.50.179:8888/imgs/mine/mine_xx.png"
          mode="aspectFill"
        ></image>
        消息通知
      </view>
      <view
        class="mine_funcList_item"
        @click="
          goUrl(
            `/subPages/mine/setting/setting?invitationCode=${userInfo.invitationCode}`
          )
        "
      >
        <image
          src="http://112.124.50.179:8888/imgs/mine/mine_set.png"
          mode="aspectFill"
        ></image>
        设置
      </view>
    </view>

    <!-- <view class="mine_bottomList">
			<view class="mine_bottom_item" @click="contactModel.show = true">
				<view class="mine_bottom_item_title display_flex">
					<image
						src="http://112.124.50.179:8888/imgs/mine/customer.png"
						mode=""
						style="margin-right: 16rpx"
					></image>
					联系客服
				</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
			<view class="mine_bottom_item" @click="goUrl('/subPages/mine/feedback')">
				<view class="mine_bottom_item_title display_flex">
					<image
						src="http://112.124.50.179:8888/imgs/mine/feedback.png"
						mode=""
						style="margin-right: 16rpx"
					></image>
					用户反馈
				</view>
				<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
			</view>
		</view> -->
  </view>

  <!-- 展示二维码弹框 -->
  <qrcodePopup
    v-model:show="contactModel.show"
    :qrcodeUrl="qrcodeUrl"
  ></qrcodePopup>
</template>

<script setup>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import _ from "lodash";
import qrcodePopup from "@/components/customerService/qrCodePopup.vue";
import navigatorComp from "/components/navigator/index.vue";
import badge from "/components/badge/index.vue";
import isLogin from "@/utils/isLogin";
import store from "@/store/index.js"; //需要引入store

import MineApi from "@/API/mine/index.js";
import CommonApi from "../../API/commenApi";

const mineApi = new MineApi();
const commonApi = new CommonApi();
const qrcodeUrl = ref();
const tabbarHeight = getApp().globalData.tabbarHeight;
const moveData = reactive({
  x: uni.getSystemInfoSync().screenWidth - uni.upx2px(120 + 32),
  y:
    uni.getSystemInfoSync().screenHeight - tabbarHeight - uni.upx2px(140 + 100),
});
// 客服弹框
const contactModel = reactive({
  show: false,
});

const userInfo = reactive({});

onShow(() => {
  getUser();
  getCustomerUrl();
});

/**
 * 获取客服二维码
 */
const getCustomerUrl = async () => {
  let res = await commonApi.getCustomerUrl({
    from: 3,
  });
  if (res.code === 0) {
    qrcodeUrl.value = res.data.url;
  }
};

/**
 * 获取用户信息
 */
const getUser = async () => {
  await store.dispatch("setUserInfo");

  let user = store.state.userInfo.userInfo;
  Object.keys(user).forEach((item) => {
    userInfo[item] = user[item];
  });
};

/**
 * 点击用户
 */
const clickUser = () => {
  if (!isLogin()) {
    //用户未登录
    uni.reLaunch({
      url: "/pages/login/login",
    });
  } else {
    //用户已登录，进入我的主页页面
    goUrl("/subPages/mine/mine");
  }
};

/**
 * 复制邀请码
 */
const copyInviteCode = () => {
  uni.setClipboardData({
    data: userInfo.invitationCode,
    success: function () {
      uni.showToast({
        title: "复制成功",
      });
    },
    fail: function (err) {
      console.log("复制失败", err);
    },
  });
};

const goUrl = (url) => {
  uni.navigateTo({
    url: url,
  });
};
</script>

<style lang="scss">
page {
  background-color: #121512;
  /* #ifdef H5 */
  padding-top: 0;
  /* #endif */
}

.content {
  padding: 52rpx 32rpx;
  box-sizing: border-box;
  background-color: #121512;
}

.mine_topIcon {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  image {
    width: 48rpx;
    height: 48rpx;
  }

  .mine_message {
    width: 48rpx;
    height: 48rpx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.userInfo {
  display: flex;
  align-items: center;

  image {
    margin-right: 24rpx;
    width: 116rpx;
    height: 116rpx;
    border-radius: 50%;
  }

  .userInfo_name {
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 38rpx;
    margin-bottom: 12rpx;
  }

  .userInfo_tip {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 33rpx;
  }

  .userInfo_inviteCode {
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 28rpx;
    display: flex;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-left: 8rpx;
    }
  }
}

.mine_account {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  position: relative;

  .mine_account_left {
    width: 430rpx;
    height: 188rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin-right: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx 0 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    overflow: hidden;

    .bgcImg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .mine_account_price {
      position: relative;
      font-weight: 500;
      font-size: 36rpx;
      color: #0e0e0e;
      line-height: 42rpx;
      letter-spacing: 1px;
      margin-bottom: 12rpx;

      image {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
      }
    }

    .mine_account_price_intro {
      position: relative;
      font-weight: 400;
      font-size: 22rpx;
      color: #0e0e0e;
      line-height: 26rpx;
    }

    .mine_account_chongzhi {
      position: relative;
      width: 124rpx;
      height: 50rpx;
      border-radius: 25rpx 25rpx 25rpx 25rpx;
      border: 2rpx solid #0e0e0e;
      font-weight: 400;
      font-size: 24rpx;
      color: #0e0e0e;
      line-height: 28rpx;
    }
  }

  .mine_account_right {
    flex: 1;
    padding: 24rpx 24rpx 20rpx 24rpx;
    box-sizing: border-box;
    height: 188rpx;
    background: linear-gradient(139deg, #f5d1bd 0%, #e4a374 100%);
    border-radius: 24rpx;
    position: relative;
    overflow: hidden;

    .mine_account_right_title {
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
      line-height: 33rpx;
      margin-bottom: 4rpx;
    }

    .mine_account_right_intro {
      font-weight: 400;
      font-size: 22rpx;
      color: #524630;
      line-height: 26rpx;
    }

    .mine_account_right_arrow {
      width: 40rpx;
      height: 40rpx;
      margin-top: 40rpx;
    }

    .mine_account_right_bottom {
      position: absolute;
      bottom: 0;
      right: -10rpx;
      width: 100rpx;
      height: 90rpx;
    }
  }
}

.mine_funcList {
  width: 100%;
  height: 368rpx;
  background: #292b2a;
  border-radius: 24rpx;
  margin-top: 32rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 10rpx;
  box-sizing: border-box;

  .mine_funcList_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #f5f5f5;
    line-height: 33rpx;

    image {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 16rpx;
    }
  }
}

.mine_bottomList {
  padding: 48rpx 24rpx 48rpx 32rpx;
  box-sizing: border-box;
  width: 100%;
  background: #292b2a;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin-top: 24rpx;

  .mine_bottom_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }

    .mine_bottom_item_title {
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 33rpx;
    }
  }
}
</style>
